<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="/taglibs.jsp" %>
<head>
	<style>
		/*body { font-size: 62.5%; }*/
		/*label, input { display:block; }*/
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
<script type="text/javascript">
function clearLookupField(id, name) {
	$(id).attr("value","");
	$(name).attr("value","");
}
$(function() {
	$("#save, #saveAndNew, #cancel, #go" ).button();
	$("#save").click(function(){newCatalogForm.submit();});
	$("#go").click(function(){
		jQuery("#list").jqGrid('searchGrid',
				{sopt:['cn','bw','eq','ne','lt','gt','ew']}
			);
		});
	// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
	$( "#popupDialogSelectBox:ui-dialog" ).dialog( "destroy" );

	$(document).ready(function(){
		var lastsel; 
		jQuery("#list").jqGrid( {
			url : 'catalog!catalogJsonList.action',
			datatype : "json",
			prmNames : {
				page : "jq.requestPage", rows : "jq.pageSize", sort : "jq.sortColumn",
				order : "jq.sortDirection", search : "jq._search", nd : "jq.nd", npage : null},
			jsonReader : {
				root : "rows", repeatitems : false, id : "0"},
			colNames : [ '<s:text name="module.common.id"/>',
						 '<s:text name="module.catalog.catalogId"/>', 
			 			 '<s:text name="module.catalog.catalogName"/>', 
			 			 '<s:text name="module.catalog.parentCatalogName"/>'],
			colModel : [ {name : 'id',index : 'id', width : 20, hidden:true}, 
						 {name : 'catalogId',index : 'catalogId', width : 140},
			     		 {name : 'catalogName',index : 'catalogName',width : 180},
			     		 {name : 'parentCatalog.catalogName', sortable : false,width : 180}],		
			rowNum : 15,
			rowList : [15,30,50],
			height: 'auto',
			pager : '#pager',
			sortname : 'catalogId',
			viewrecords: true,
			sortorder : 'asc',
			loadOnce : true,
			caption : false
		});
	});
	
	$( "#popupDialogSelectBox" ).dialog({
		autoOpen: false,
		height: 400,
		width: 520,
		modal: true,
		buttons: {
			"Select": function() {
				var id = jQuery("#list").jqGrid('getGridParam','selrow');
				if (id)	{
					var ret = jQuery("#list").jqGrid('getRowData',id);
					$("#parentCatalogId").attr("value",ret.id);
					$("#parentCatalogName").attr("value",ret.catalogName);
					$( this ).dialog( "close" );
				} else { alert("Please select row");}
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

});
</script>
<style type="text/css">
.clear_lookupfield {
background: transparent url(${ctx}/themes/common/images/allCommon-Icons.gif) no-repeat scroll;
cursor: pointer; 
}
.clear_lookupfield {
background-position: -1px -1261px;
background-position-x: -1px;
background-position-y: -1261px;
}
</style>
</head>
<body>

<h2>Create Catalog</h2>
	<div class="ui-helper-clearfix">
		<button id="save"><s:text name="button.save"/></button>
		<button id="saveAndNew"><s:text name="button.saveAndNew"/></button>
		<button id="cancel"><s:text name="button.cancel"/></button>
	</div>

<div id="popupDialogSelectBox" title="Select a parent catalog">
<div>
	<label for="searchCatalog"><s:text name="button.search"/></label>:
	<input id="searchCatalog" name="searchCatalog"></input>
	<button id="go"><s:text name="button.go"/></button>
</div>
<table id="list"></table>
<div id="pager"></div>
</div>

<s:form id="newCatalogForm" action="catalog!create" validate="true" autocomplete="off" method="POST">
<table id="secContentPotential Information" class="secContent" width="95%" border="0" cellspacing="1" cellpadding="0">
	<tbody width="100%">
		<tr id="row0_catalog">
			<td width="25%" class="label">
				<s:label key="module.catalog.catalogId" for="catalogId"/></td>
			<td width="25%" style="vertical-align:top;padding-top:4">
				<s:textfield id="catalogId" label="" name="catalog.catalogId"/></td>
			<td width="25%" class="label">
				<s:label key="module.catalog.catalogName" for="catalogName"/></td>
			<td width="25%" class="element">
				<s:textfield id="catalogName" label="" name="catalog.catalogName"/>
		</tr>
		<tr id="row1_catalog">
			<td width="25%" class="label">
				<s:label key="module.catalog.parentCatalogName" for="parentCatalogName"/></td>
			<td width="25%" style="vertical-align:top;padding-top:4" colspan="1">
				<s:textfield  id="parentCatalogName" label="" name="catalog.parentCatalog.catalogName" readonly="true"/>
				<input type="hidden" id="parentCatalogId" name="catalog.parentCatalog.id"></input>
				<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
					width="15" height="10" border="0" align="absmiddle" title="Select" 
					onclick='$("#popupDialogSelectBox").dialog("open")'>
				<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
					width="15" height="10" border="0" align="absmiddle" title="Clear" 
					onclick="clearLookupField('#parentCatalogId','#parentCatalogName')">
				</td>
			<td width="25%" class="label"></td>
			<td width="25%" style="vertical-align:top;padding-top:4" colspan="1"></td>
		</tr>
		<tr id="row2_catalog">
			<td width="25%" class="label">
				<s:label key="module.common.description" for="description"/></td>
			<td width="25%" style="vertical-align:top;padding-top:4" colspan="3">
				<s:textarea  id="description" label="" name="catalog.description" />
		</tr>

	</tbody>
</table>
</s:form>
<script type="text/javascript">

</script>	
</body>
